<template>
  <div class="cinema_body">
     <loading v-if="flag"></loading>
    <!-- 如果是全局注册的 就直接使用这个就好 -->
   <Scroll>
      <ul>
      <li v-for="item in cinemaList" :key="item.id">
        <div>
          <span>{{item.nm}}</span>
          <span class="q">
            <span class="price">{{item.sellPrice}}</span> 元起
          </span>
        </div>
        <div class="address">
          <span>{{item.addr}}</span>
          <span>{{item.distance}}</span>
        </div>
        <div class="card">
          <!-- 需要过滤器来实现 key是键名  num 是值  循环的是一个对象
				通过if来过滤出不等于1的标签  定义的过滤器是根据key键名来实现添加文字的
				v-if="num ===1"
          -->
          <div v-for="(num,key) in item.tag" :key="key" :class="key |classCard">{{key | formatCard}}</div>
        </div>
      </li>
    </ul>
   </Scroll>
  </div>
</template>

<script>
import { getcinemalist } from "network/cilist";
import Scroll from "components/Srcoll/srcoll";
import loading from "components/Loading";
export default {
  name: "CiList",
    components: {
    Scroll,
    loading
  },
  data() {
    return {
      cinemaList: [],
       flag:true,
       prevCityid:-1
    };
  },
      // 组件活跃到时候执行
  activated() {
    var cityid = this.$store.state.city.id;
    if(this.prevCityid === cityid) {return;} //如果相等就说明不执行 直接组件本生命周期的函数
    //点击城市的时候就发送id过去替换新的数据  切换的时候 再次发送请求
    this.flag =true
    this.getmovielist(cityid);
  },
  mounted() {
    var cityid = this.$store.state.city.id;
    this.getcinemalist(cityid);
  },
  methods: {
    getcinemalist(cityid) {
      getcinemalist(cityid).then((res) => {
        // var msg = res.msg;
        // if (msg === "ok") {
          // this.flag = false
        //   this.cinemaList = res.data.cinemas;
        // }
      });
    },
  },
//   过滤器
  filters: {
	//   标签名
    formatCard(key) {
      //   定义一个变量对象
      var card = [
        { key: "allowRefund", value: "改签" },
        { key: "endorse", value: "退" },
        { key: "sell", value: "折扣卡" },
        { key: "snack", value: "小吃" },
	  ];
	  //根据传递进来的键名比对来返回对应的值
      for (var i = 0; i < card.length; i++) {
        if (card.key === key) {
          return card[i].value;
        }
	  }
	  return '';
	},
	// 颜色名字
	  classCard(key) {
      //   定义一个变量对象
      var card = [
        { key: "allowRefund", value: "bl" },
        { key: "endorse", value: "bl" },
        { key: "sell", value: "or" },
        { key: "snack", value: "or" },
	  ];
	  //根据传递进来的键名比对来返回对应的值
      for (var i = 0; i < card.length; i++) {
        if (card.key === key) {
          return card[i].value;
        }
	  }
	  return '';
    },
  },
};
</script>

<style scoped>
</style>